<script setup>
	import {
		onMounted,
		ref,
		reactive
	} from 'vue'
	import {
		useStore
	} from 'vuex'
	import {
		onShow,
		onLaunch
	} from '@dcloudio/uni-app'
	import common from './js/common'


	onLaunch(() => {

	})
	onMounted(() => {
		// const app = getApp()
		// app.globalData = {
		// 	baseUrl: 'https://api.nami-pg.com/api/',
		// 	userInfo: null,
		// 	gc: false,
		// 	pageSize: 9,
		// 	taburl: "",
		// 	cofing: {}
		// }

		// 定义响应式 globalData
		const globalData = reactive({
			baseUrl: 'https://api.nami-pg.com/api/',
			userInfo: null,
			gc: false,
			pageSize: 9,
			taburl: "",
			cofing: {}
		});

		common.getConfigByGroup({}).then(res => {
			getApp().globalData.config = res.data
			const result = {};
			res.data.rows.forEach(item => {
				// 使用 item.key 作为属性名（如 'site.commission_1' -> 'commission_1'）
				const key = item.key.split('.').pop(); // 提取最后一部分（去掉 'site.'）
				result[key] = item.value;
			});
			getApp().globalData.config2 = result
		})
		if (localStorage.getItem("userInfo")) {
			globalData.userInfo = JSON.parse(localStorage.getItem("userInfo"))
			common.rechargeInit({}, {
				"token": globalData.userInfo.token
			}).then(res => {
				getApp().globalData.recharge = res.data.data
			})

			common.getMinLoginUser({}, {
				"token": globalData.userInfo.token
			}).then(res => {
				getApp().globalData.userInfo.user = res.data.user
			})

			common.vip({}, {
				"token": globalData.userInfo.token
			}).then(res => {
				getApp().globalData.userInfo.vipinfo = res.data.data
			})
		}
		const app = getApp();
		app.globalData = globalData;


		let hdd = document.createElement("div")
		hdd.classList.add("hdd")
		hdd.style.top = "6px"
		hdd.style.width = "12px"
		hdd.style.height = "12px"
		document.getElementsByClassName("uni-tabbar__bd")[1].appendChild(hdd)
		// updateTabBarTexts(store)
	})
</script>

<style>
	/* 隐藏窗口滚动条 */
	::-webkit-scrollbar {
		display: none !important;
	}

	/* PC端适配 */
	@media (min-width: 768px) {

		html {
			scrollbar-width: none !important;
			/* Firefox */
			-ms-overflow-style: none !important;
			/* IE/Edge */
		}

		/* 限制整个应用的宽度 */
		#app {
			max-width: 750rpx !important;
			margin: 0 auto !important;
			height: 100vh !important;
			background: #003311;
			position: relative !important;
			overflow-x: hidden !important;
		}

		/* 强制限制 tabBar 的宽度 */
		.uni-tabbar {
			width: 750rpx !important;
			left: 50% !important;
			transform: translateX(-50%) !important;
			right: auto !important;
		}

		/* 调整页面内容，避免被 tabBar 遮挡 */
		.uni-page-wrapper {
			padding-bottom: 50px !important;
			/* 适配 tabBar 高度 */
		}

		/* 调整 body 背景 */
		body {
			background: #000 !important;
			/* display: flex !important; */
			justify-content: center !important;
			height: 100vh !important;
			overflow-x: hidden !important;
		}

		.hdtybox {
			left: calc(50vw - 375rpx) !important;
			width: 750rpx !important;
		}
	}

	* {
		padding: 0;
		margin: 0;
		box-sizing: border-box;
	}

	html {
		font-size: 24rpx;
		color: #fff;
		background-color: #003311;
	}

	.f48 {
		font-size: 48rpx;
	}

	.f40 {
		font-size: 40rpx;
	}

	.f36 {
		font-size: 36rpx;
	}

	.f32 {
		font-size: 32rpx;
	}

	.f30 {
		font-size: 30rpx;
	}

	.f28 {
		font-size: 28rpx;
	}

	.f26 {
		font-size: 26rpx;
	}

	.f24 {
		font-size: 24rpx;
	}

	.f22 {
		font-size: 22rpx;
	}

	.f20 {
		font-size: 20rpx;
	}

	.fwb {
		font-weight: bold;
	}

	.cff {
		color: #fff;
	}

	.c9c {
		color: #9C9FB2;
	}

	.cc5 {
		color: #C5C5C5;
	}

	.c1a {
		color: #1A6CD7;
	}

	.cy {
		color: #FFBE32;
	}

	.w100 {
		width: 100%;
	}

	.w70 {
		width: 70%;
	}

	.w60 {
		width: 60%;
	}

	.w50 {
		width: 50%;
	}

	.w40 {
		width: 40%;
	}

	.w30 {
		width: 30%;
	}

	.w33 {
		width: 33.33%;
	}

	.w20 {
		width: 20%;
	}

	.h100 {
		height: 100%;
	}

	.mb10 {
		margin-bottom: 10rpx;
	}

	.mb20 {
		margin-bottom: 20rpx;
	}

	.mb30 {
		margin-bottom: 30rpx;
	}

	.mb40 {
		margin-bottom: 40rpx;
	}

	.mb50 {
		margin-bottom: 50rpx;
	}

	.fll {
		float: left;
	}

	.flr {
		float: right;
	}

	.vih {
		visibility: hidden;
	}

	.outdata {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.bj_center {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.bj_right {
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}


	.bj_left {
		display: flex;
		justify-content: left;
		align-items: center;
	}


	.bj_between {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.bj_around {
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.bj_evenly {
		display: flex;
		justify-content: space-evenly;
		align-items: center;
	}

	.bj_sx {
		display: flex;
		flex-flow: column;
		justify-content: center;
		align-items: center;
	}

	.por {
		position: relative;
	}

	.poa {
		position: absolute;
	}

	.pof {
		position: fixed;
	}

	.clearfloat:after {
		display: block;
		clear: both;
		content: "";
		visibility: hidden;
		height: 0
	}

	.clearfloat {
		zoom: 1
	}

	.tc {
		text-align: center;
	}

	.tr {
		text-align: right;
	}

	.lt0 {
		left: 0;
		top: 0;
	}

	.dh_1 {
		animation: dh_1d 0.3s 1 linear;
		animation-fill-mode: forwards;
	}

	@keyframes dh_1d {
		0% {
			transform: scale(0);
		}

		100% {
			transform: scale(1);
		}
	}

	.dh_2 {
		animation: dh_2d 0.3s 1 linear;
		animation-fill-mode: forwards;
	}


	@keyframes dh_2d {
		0% {
			transform: scale(1);
		}

		100% {
			transform: scale(0);
		}
	}

	.marquee {
		overflow: hidden;
		white-space: nowrap;
		box-sizing: border-box;
	}

	.marquee-content {
		display: inline-block;
		padding-left: 100%;
		animation: marquee 10s linear infinite;
	}

	@keyframes marquee {
		0% {
			transform: translateX(0);
		}

		100% {
			transform: translateX(-100%);
		}
	}

	.lhdh {
		animation: move-c10ecbfa 3s linear infinite;
	}

	@keyframes move-c10ecbfa {
		0% {
			transform: rotate(-10deg) scale(.8)
		}

		25% {
			transform: rotate(10deg) scale(.8)
		}

		50% {
			transform: rotate(0) scale(.8)
		}

		70% {
			transform: rotate(0) scale3d(.8, .9, .8)
		}

		90% {
			transform: rotate(0) scale3d(.8, .9, .8)
		}

		to {
			transform: rotate(-10deg) scale(.8)
		}
	}

	.uni-tabbar__item .uni-tabbar__bd .uni-tabbar__icon {
		width: 48rpx;
		height: 48rpx;
	}

	.uni-tabbar__item:nth-child(4) {
		position: relative;
	}

	.uni-tabbar__item:nth-child(3) {
		position: relative;
	}

	.uni-tabbar__item:nth-child(4) .uni-tabbar__bd {
		position: absolute;
		top: -34rpx;
	}

	.uni-tabbar__item:nth-child(4) .uni-tabbar__bd .uni-tabbar__icon {
		width: 136rpx !important;
		height: 116rpx !important;
	}

	.uni-tabbar__label {
		font-size: 22rpx;
		font-weight: 500;
	}

	.uni-progress-inner-bar {
		border-radius: 100rpx !important;
	}

	.uni-progress-bar {
		height: 100% !important;
	}

	.uni-popup {
		z-index: 10000 !important;
	}

	.uni-popup-message__box {
		flex: none !important;
		border-radius: 20rpx !important;
		width: 80% !important;
		margin-top: 20rpx;
	}

	.tyinputbox {
		height: 88rpx;
		background: #003311;
		padding: 0 34rpx 0 28rpx;
		border-radius: 12rpx;
	}

	.cab {
		color: #ABC0D5;
	}

	.ca2 {
		color: #A2B5D5;
	}

	.c1f {
		color: #1F9F59;
	}

	.hdd {
		width: 28rpx;
		height: 28rpx;
		background: #FF0000;
		border-radius: 100%;
		position: absolute;
		top: -6rpx;
		right: 0rpx;
		opacity: 1;
		transform: scale(1);
		animation: bounce .6s ease-in-out infinite;
	}

	@keyframes bounce {

		0%,
		100% {
			transform: scale(1);
		}

		50% {
			transform: scale(1.2);
		}
	}


	.hdtybox {
		position: fixed;
		top: 0;
		background: #003311;
		z-index: 111;
		width: 100%;
		padding-top: 88rpx;
		left: 0;
		overflow-y: auto;
		height: 100vh;
	}


	.hdpageout {

		animation: hdpageoutd 0.3s 1 linear;
		animation-fill-mode: forwards;
		opacity: 0;
	}

	@keyframes hdpageoutd {
		0% {
			transform: translateX(0%);
			opacity: 1;
		}

		100% {
			transform: translateX(100%);
			opacity: 0;
		}
	}

	.hdpageout2 {

		animation: hdpageout2d 0.3s 1 linear;
		animation-fill-mode: forwards;
	}

	@keyframes hdpageout2d {
		0% {
			transform: translateY(0%);
		}

		100% {
			transform: translateY(100%);
		}
	}

	.hdpagein {
		animation: hdpageind 0.3s 1 linear;
		animation-fill-mode: forwards;
		opacity: 0;
	}

	@keyframes hdpageind {
		0% {
			transform: translateX(100%);
			opacity: 0;
		}

		100% {
			transform: translateX(0%);
			opacity: 1;
		}
	}

	.hdpagein2 {
		animation: hdpagein2d 0.3s 1 linear;
		animation-fill-mode: forwards;
	}

	@keyframes hdpagein2d {
		0% {
			transform: translateY(100%);
		}

		100% {
			transform: translateY(0%);
		}
	}

	.jtxz {
		animation: jtxzd 0.3s 1 linear;
		animation-fill-mode: forwards;
	}

	@keyframes jtxzd {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(90deg);
		}
	}

	.jtxz2 {
		animation: jtxz2d 0.3s 1 linear;
		animation-fill-mode: forwards;
	}

	@keyframes jtxz2d {
		0% {
			transform: rotate(90deg);
		}

		100% {
			transform: rotate(0deg);
		}
	}

	.szdh1 {
		animation: szdh1d 0.3s 1 linear;
		animation-fill-mode: forwards;
	}

	@keyframes szdh1d {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(180deg);
		}
	}

	.szdh2 {
		animation: szdh2d 0.3s 1 linear;
		animation-fill-mode: forwards;
	}

	@keyframes szdh2d {
		0% {
			transform: rotate(180deg);
		}

		100% {
			transform: rotate(0deg);
		}


	}

	.recl {
		animation: recld 0.3s infinite linear;
		animation-fill-mode: forwards;
	}

	@keyframes recld {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}

	.uni-date-x {
		background: #001F0A !important;
		color: #fff !important;

	}

	.uni-date-x--border {
		border-radius: 12rpx !important;
		border: 2rpx solid #001F0A !important;
	}

	.page-enter-active,
	.page-leave-active {
		transition: all 0.3s;
	}

	.page-enter {
		transform: translateX(100%);
		opacity: 0;
	}

	.page-leave-to {
		transform: translateX(-20%);
		opacity: 0;
	}
</style>